<template>
  <div v-if="isShow"
       class="selectOrder">
    <el-table ref="goodsTable"
              border
              size="mini"
              highlight-current-row
              :data="records"
              @row-click="rowClick">
      <span slot="empty"
            :closable="false"
            type="warning">
        暂无相关物品信息，
        <el-button type="text"
                   @click="addGoods">去添加新物品</el-button></span>
      <template v-for="(column, index) in columns">
        <el-table-column :key="index"
                         :prop="column.prop"
                         :label="column.name"
                         :show-overflow-tooltip="true">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import goods from "@/api/modules/goods.js";
export default {
  name: "SelectGoods",
  props: {
    type: String,
    value: String,
    dialogVisible: Boolean,
    customerId: Number
  },
  data () {
    return {
      records: [],
      isShow: false,
      keyIndex: 0,
      columns: [
        { name: "物料编码", prop: "barcode" },
        { name: "物品名称", prop: "name" },
        { name: "物品类型", prop: "type" },
        { name: "规格", prop: "spec" },
        { name: "重量", prop: "netWeight" },
        { name: "体积", prop: "volume" },
        { name: "价值", prop: "value" }
      ]
    };
  },
  watch: {
    value: {
      immediate: true,
      handler (val) {
        if (val.length > 1) {
          this.search();
        }
      }
    }
  },
  mounted () {
    window.addEventListener("keydown", this.KeyboardEvent);
  },
  methods: {
    KeyboardEvent (e) {
      if (e && e.keyCode == 40 && this.dialogVisible) {
        this.keyIndex++;
        if (this.keyIndex == this.records.length) {
          this.keyIndex = 0;
        }
      }
      if (e && e.keyCode == 38 && this.dialogVisible) {
        this.keyIndex--;
        if (this.keyIndex < 0) {
          this.keyIndex = this.records.length - 1;
        }
      }
      try {
        if (this.dialogVisible && this.records.length > 0) {
          const strList = this.$refs.goodsTable;
          for (var i = 0; i < strList.length; i++) {
            strList[i].classList.remove("current-row");
          }
          this.$refs.goodsTable?.setCurrentRow(this.records[this.keyIndex]);
        }
        if (
          e &&
          e.keyCode == 13 &&
          this.dialogVisible &&
          this.records.length > 0
        ) {
          this.rowClick(this.records[this.keyIndex]);
        }
      } catch (error) { console.log("err", error) }
    },
    search () {
      let postData = {
        [this.type]: this.value,
        customerId: this.customerId,
        status: 1,
        size: 5
      };
      if (this.type === 'name') {
        postData.goodsName = this.value;
      }
      goods.search(postData).then((res) => {
        if (res.data.records?.length > 0) {
          this.isShow = true;
          this.records = res.data.records;
          this.$nextTick(() => {
            this.$refs.goodsTable?.setCurrentRow(this.records[0]);
          });
        } else {
          this.isShow = true;
          this.records = [];
          this.$emit("update:dialogVisible", false);
        }
      });
    },
    addGoods () {
      this.$emit("addGoods", true);
      this.$emit("update:dialogVisible", false);
    },
    rowClick (row) {
      this.$emit("selectRow", row);
      this.isShow = false;

      this.$emit("update:dialogVisible", false);
    }
  }
};
</script>
<style scoped lang="scss">
.selectOrder {
  position: absolute;
  z-index: 9;
  width: 1000px;
  background: var(--prev-bg-white);
  padding: 20px;
  border: 1px solid rgba(var(--prev-color-primary), 0.4);
}
/deep/ .el-table__row {
  height: 50px;
}
</style>
